<template>
  <div class="film-detail">
    <!-- 导航 -->
    <nav-bar :title="film.name" />
    <!-- 加载失败 -->
    <empty v-if="error" :description="errorMsg" @tap="getFilmDetail" />
    <!-- 正在加载 -->
    <empty v-else-if="loading" image-type="default" description="正在拼命加载" :show-button="false" />
    <!-- 没有数据 -->
    <empty v-else-if="!film" image-type="search" description="暂无数据" :show-button="false" />
    <!-- 数据展示 -->
    <template v-else>
      <div class="film-wrap card">
        <van-cell>
          <template #title>
            <div class="cover">
              <cover-lazy :src="film.pic" />
            </div>
          </template>
          <div class="content">
            <div class="title">{{ film.name }}</div>
            <div>类型：{{ film.filmTypes }}</div>
            <div>片长：{{ film.duration }}分钟</div>
            <div>上映：{{ dayjs(film.publishDate).format('YYYY-MM-DD') }}
              <template v-if="!canBuy">
                <span class="bold">{{ dayjs().to(film.publishDate, true) }}</span>后上映
              </template>
            </div>
          </div>
        </van-cell>
      </div>

      <div class="film-wrap other">
        <van-cell title="评分" center>
          <template v-if="film.grade">
            <van-rate v-model="film.grade2" allow-half readonly  />
            <span class="bold">{{ film.grade | formatGrade }}</span>分
          </template>
          <span v-else>暂无评分</span>
        </van-cell>
        <van-cell title="想看">
          <span class="bold">{{ film.likeNum }}</span>人想看
        </van-cell>
        <van-cell title="导演" :value="film.director"></van-cell>
        <van-cell title="主演">
          <span class="cast">{{ film.cast }}</span>
        </van-cell>
      </div>

      <div class="film-wrap intro">
        <van-cell title="简介" :label="film.intro"></van-cell>
      </div>

    </template>
    <!-- 购买按钮占位 -->
    <div class="safe-bottom" :style="{ height: buyHeight }"></div>
    <!-- 购买按钮 -->
    <van-popup 
      ref="buy" 
      v-model="showBuy" 
      :overlay="false" 
      :close-on-click-overlay="false" 
      :lock-scroll="false" 
      round 
      position="bottom" 
      safe-area-inset-bottom
    >
      <div class="buy-btn">
        <van-button 
          color="linear-gradient(to right, #ffba00, #ee0a24)" 
          round 
          block 
          @click="onBuy"
        >特惠购票</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NavBar from '@/components/NavBar'
import { canBuy } from '@/utils/util'
import { filmDetail } from '@/api/film'

// 影片详情
export default {
  name: 'FilmDetail',
  components: { NavBar },
  props: {
    filmId: {
      type: [Number, String],
      require: true,
    }
  },
  computed: {
    ...mapGetters([
      'currentCity'
    ]),
    // 是否可购买
    canBuy() { 
      return canBuy(this.film.publishDate)
    }
  },
  data() {
    return {
      error: false,
      errorMsg: '数据加载失败',
      loading: true,
      film: {},
      showBuy: true,
      buyHeight: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.buyHeight = this.$refs.buy.$el.clientHeight + 'px'
    })
  },
  created() {
    this.getFilmDetail()
  },
  methods: {
    // 影片详情
    async getFilmDetail() {
      try {
        this.error = false
        this.loading = true
        if (!this.currentCity) {
          await this.$store.dispatch('city/getCurrentCity')
        }
        const { data } = await filmDetail(this.filmId, {
          cityId: this.currentCity.cityId
        })
        data.grade = Number(data.grade)
        data.grade2 = data.grade / 2
        this.film = data
      } catch (error) {
        this.error = true
        this.errorMsg = error.message
      } finally {
        this.loading = false
      }
    },
    // 购买 去影院
    onBuy() {
      if (!this.film || JSON.stringify(this.film) == '{}') {
        return false
      }
      // 将当前影片id 存入缓存
      this.$store.commit('global/SET_CUR_FILM_ID', this.filmId)
      this.$router.push('/cinema')
    }
  },
}
</script>

<style lang="scss" scoped>
.film-detail {
  padding: 0 16px;
  .film-wrap {
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    .bold {
      font-weight: 700;
      color: $warning;
    }
  }
  .other, .card {
    /deep/ .van-cell__title {
      flex: none;
    }
  }

  .other {
    .van-rate {
      vertical-align: sub;
      margin-right: 5px;
    }
    .cast {
      display: inline-block;
      margin-left: 10px;
      text-align: left;
    }
  }
  
  .card {
    .cover {
      width: 80px;
      height: 110px;
      border-radius: 10px;
      overflow: hidden;
    }
    .content {
      margin-left: 10px;
      font-size: 14px;
      line-height: 24px;
      text-align: left;
      color: $unactive;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: $active;
        padding: 5px 0;
      }
    }
  }

  .intro {
    .van-cell__label {
      font-size: 14px;
      line-height: 1.6;
    }
  }

  .buy-btn {
    padding: 10px 16px;
  }
}

</style>